<template>
    <div class="MapMark_div">
        <div class="components_title">
            <TitleTop>
            </TitleTop>

            <TitleMenu>
                <div slot="titleMenu_ico" @click="$router.go(-1)">
                    <div class="title_left_ico">
                        <a-icon type="left" class="Group_ico" theme="outlined" />
                    </div>
                    <div class="title_left_text">返回</div>
                </div>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <span>地图标注</span>
                </div>
                <div slot="titleMenu_add">
                    <a-icon type="sync" style="font-size: 7vw;" theme="outlined" />
                </div>
            </TitleMenu>
        </div>
        <div id="MapMark_content" class="content_104class" v-scroll="onScroll">
            <a-row class="MapMark_row">
                <a-col :span="8" class="MapMark_col_left">
                    标注名称
                </a-col>
                <a-col :span="16" class="MapMark_col_right">
                    <a-input  class="a_input_set"   v-model="markName"/>
                </a-col>
            </a-row>

            <a-row class="MapMark_row">
                <a-col :span="8" class="MapMark_col_left">
                    标记类别
                </a-col>
                <a-col :span="16" class="MapMark_col_right">
                    <select defaultValue="0"  id="MapMark_MarkType" v-model="markTypeSelected" class="selectClass">
                        <option :value="markType.id" :label="markType.name"  v-for="markType in markTypeList">{{markType.name}}</option>
                    </select>
                </a-col>
            </a-row>

            <a-row class="MapMark_row">
                <a-col :span="8" class="MapMark_col_left">
                    开始阈值
                </a-col>
                <a-col :span="16" class="MapMark_col_right">
                    <select defaultValue="1"  v-model="STV_begin" id="STV_begin" class="selectClass">
                        <option value="1"> 1 </option>
                        <option value="2"> 2 </option>
                        <option value="3"> 3 </option>
                        <option value="4"> 4 </option>
                        <option value="5"> 5 </option>
                        <option value="6"> 6 </option>
                        <option value="7"> 7 </option>
                        <option value="8"> 8 </option>
                        <option value="9"> 9 </option>
                        <option value="10"> 10 </option>
                        <option value="11"> 11 </option>
                        <option value="12"> 12 </option>
                        <option value="13"> 13 </option>
                        <option value="14"> 14 </option>
                        <option value="15"> 15 </option>
                        <option value="16"> 16 </option>
                        <option value="17"> 17 </option>
                        <option value="18"> 18 </option>
                        <option value="19"> 19 </option>
                        <option value="20"> 20 </option>
                        <option value="21"> 21 </option>
                        <option value="22"> 22 </option>
                    </select>
                </a-col>
            </a-row>

            <a-row class="MapMark_row">
                <a-col :span="8" class="MapMark_col_left">
                    结束阈值
                </a-col>
                <a-col :span="16" class="MapMark_col_right" >
                    <select defaultValue="0" v-model="STV_end" id="STV_end" class="selectClass">
                        <option value="1"> 1 </option>
                        <option value="2"> 2 </option>
                        <option value="3"> 3 </option>
                        <option value="4"> 4 </option>
                        <option value="5"> 5 </option>
                        <option value="6"> 6 </option>
                        <option value="7"> 7 </option>
                        <option value="8"> 8 </option>
                        <option value="9"> 9 </option>
                        <option value="10"> 10 </option>
                        <option value="11"> 11 </option>
                        <option value="12"> 12 </option>
                        <option value="13"> 13 </option>
                        <option value="14"> 14 </option>
                        <option value="15"> 15 </option>
                        <option value="16"> 16 </option>
                        <option value="17"> 17 </option>
                        <option value="18"> 18 </option>
                        <option value="19"> 19 </option>
                        <option value="20"> 20 </option>
                        <option value="21"> 21 </option>
                        <option value="22"> 22 </option>
                    </select>
                </a-col>
            </a-row>

            <a-row class="MapMark_row">
                <a-col :span="8" class="MapMark_col_left">
                    当前经度
                </a-col>
                <a-col :span="16" class="MapMark_col_right">
                    <a-input class="a_input_set" id="MapMark_longitude" v-model="Longitude"  />
                </a-col>
            </a-row>

            <a-row class="MapMark_row">
                <a-col :span="8" class="MapMark_col_left">
                    当前纬度
                </a-col>
                <a-col :span="16" class="MapMark_col_right">
                    <a-input  class="a_input_set" id="MapMark_latitude" v-model="Latitude" />
                </a-col>
            </a-row>

            <a-row class="MapMark_row">
                <a-col :span="8" class="MapMark_col_left">
                    标记备注
                </a-col>
                <a-col :span="16" class="MapMark_col_right">
                    <a-input class="a_input_set" v-model="instructions" />
                </a-col>
            </a-row>

           

            <a-row id="MapMark_btn_row">
                <a-col :span="24" class="MapMark_btn_col">
                    <el-button type="info"  id="MapMark_btn" class="my_big_long_btn" v-on:click="sendMapMarkInfo">
                        确定
                    </el-button>
                </a-col>

            </a-row>

        </div>
        <FooterChaanel v-if="isShowFooter===true"></FooterChaanel>
    </div>
</template>
<style>

    #MapMark_content{
        overflow: scroll;
        height: 103vw;
    }

    .MapMark_row{
        width: 100vw;
        height: 12vw;
        margin: 3vw 0 3vw 0;
    }
    .MapMark_col_left{
        height: 12vw;
        line-height: 12vw;
        font-size: 6vw;
        font-family: "Microsoft YaHei";
        text-align: center;
        color: black;
    }
    .MapMark_col_right{
        height: 12vw;
        line-height: 12vw;

    }
    .MapMark_col_right input{
        font-size: 5vw;
        font-family: PingFangSC-Semibold;

    }
    #MapMark_btn_row{
        width: 100vw;
        height: 14vw;
        line-height: 14vw;
        margin: 4vw 0 3vw 0;
    }

    #MapMark_longitude{
        width: 60vw;
        height: 12vw;
        padding: 0 0 0 2vw
    }
    .a_input_set{
        width: 60vw;
        height: 12vw;
        padding: 0 0 0 2vw;
        background: lightgray;
        border-radius: 2vw;
        font-size: 4vw;
    }

    .MapMark_col_right .ant-select{
        width: 60vw;
        height: 12vw;
        line-height: 12vw;

    }
    .ant-select-dropdown{
        height: 100vw;
        overflow: scroll;
    }
    .MapMark_col_right .ant-select .ant-select-selection--single{
        height: 13vw;
    }
    #MapMark_MarkType div .ant-select-arrow{
        padding: 0 ;
    }
    #STV_begin div .ant-select-arrow{
        padding: 0 ;
    }
    #STV_end div .ant-select-arrow{
        padding: 0 ;
    }
    .MapMark_col_right .ant-select .ant-select-selection .ant-select-selection__rendered{
        height: 12.3vw;
    }
    .my_big_long_btn{
        width: 94.21vw;
        height: 14.687vw;
        border-radius: 2vw;
        background-image: linear-gradient(-180deg, #8F8F8F 0%, #5D5D5D 100%);
        font-size: 6vw;
        text-align: center;
    }
    .MapMark_btn_col{
        text-align: center;
    }
    /*设置下拉框的大小，字体等*/
    .ant-select-dropdown-menu-item{
        font-size: 5.5vw;
        font-family: PingFangSC-Semibold;

    }
</style>
<script>
    import TitleTop from './../components/TitleTop';
    import TitleMenu from  './../components/TitleMenu';
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import FooterChaanel from "../components/FooterChaanel";
    import axios from  'axios';
   /* import Vue from 'vue';
    import vuescrol from 'vue-scroll';
    Vue.use(vuescrol);*/
    export default {
        name: "GroupAdd",
        components:{FooterChaanel, ACol, ARow, TitleTop,TitleMenu},
        mounted(){
            this.getMarkType();
            window.addEventListener('native.keyboardshow', this.keyboardShowHandler);
            window.addEventListener('native.keyboardhide', this.keyboardHideHandler);

        },
        data() {
            return {
                msg: 'hello vue',
                markTypeSelected:'',
                markTypeSelectedId:'',
                markTypeSelectedName:'',
                markTypeList:'',
                markName:'',
                STV_begin:'',
                STV_end:'',
                Longitude:localStorage.getItem("longitude"),
                Latitude:localStorage.getItem("latitude"),
                instructions:'',
                isShowFooter:true,
            }
        },
        computed: {
            currMarkType() {
                return this.markTypeList.find(t=> t.id === this.markTypeSelected);
            },

        },
        methods:{
            getMarkType(){
                let me = this;
                console.log("初始化工作模式...");
                me.$api.getMarkType().then(resp=>{
                    let result = resp.data.result;
                    //状态码200
                    if(resp.status === 200){
                        me.markTypeList = result.data;
                        console.log("标记类别初始化完成...");
                    }
                }).catch(error=>{
                    //请求失败
                    console.log("标记类别填充失败:"+error);

                })
            },
            sendMapMarkInfo(){
                let me = this;
                //这里没做验证就提交了 this.currMarkType.id
                console.log(this.markName,this.markTypeSelected,this.STV_begin,this.STV_end,
                    this.Longitude,this.Latitude,this.instructions);
                this.$api.sendMapMarkInfo(this.markName,this.markTypeSelected,this.stV_begin,this.stV_end,
                   this.Longitude,this.Latitude,this.instructions).then( response=>{
                       if(response.status == 204){
                           console.log("地图标注信息提交成功！");
                           this.showBottom();
                           this.$router.go(-1);//返回上一层

                       }else{
                           console.log("地图标注信息失败！返回其他状态码");
                       }

                }).catch(error =>{
                    this.info (error);
                    console.log(error);

                });
            },
            onScroll(){
                this.handleScroll;
            },
            info(error) {
                this.$message.info('信息提交失败'+error,3);
            },
            showBottom : function() {
                    let self = this;
                    console.log("ss"+window.plugins.toast);
                    window.plugins.toast.showWithOptions({
                            message: "提交成功",
                            duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
                            position: "bottom",
                            addPixelsY: -60  // added a negative value to move it up a bit (default 0)
                        },
                        // implement the success callback
                        function (result) {
                            console.log('toast success: ');
                            if (result && result.event) {
                                self.$router.go(-1);
                            } else {
                                console.log("toast error: ");
                            }
                        });


            },
            keyboardShowHandler(e){
                /*console.log(e.keyboardHeight);*/
                this.isShowFooter = false;

            },
            keyboardHideHandler(e){
                this.isShowFooter = true;
            },

        }
    }
</script>

